<template>
  <div>
    <div class="homepage">
      <header class="header">
        <div class="logo">比价宝</div>
        <nav class="nav">
          <ul>
            <li><router-link to="/main" class="btn">首页</router-link></li>
            <li><router-link to="/webdate" class="btn">平台比价</router-link></li>
            <li><router-link to="/search" class="btn">立即搜索</router-link></li>
          </ul>
        </nav>
      </header>
    </div>
    <div class="content">
      <h1>商品集群</h1>
      <div v-for="(cluster, index) in clusters" :key="index" class="cluster">
        <h2 @click="showClusterProducts(index)">商品集群 {{ index + 1 }}</h2>
        <div v-if="selectedCluster === index">
          <ul>
            <li v-for="product in cluster" :key="product.productId">{{ product.productName }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      clusters: [],
      selectedCluster: null,
    };
  },
  mounted() {
    this.fetchClusters();
  },
  methods: {
    fetchClusters() {
      axios.get('http://localhost:8080/api/cluster/product-clusters')
        .then(response => {
          this.clusters = response.data;
        })
        .catch(error => {
          console.error('Failed to fetch clusters:', error);
        });
    },
    showClusterProducts(index) {
      this.selectedCluster = this.selectedCluster === index ? null : index;
    }
  }
}
</script>

<style scoped>
/* General Styles */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: space-around;
}

.nav ul li {
  margin: 0 10px;
}

.nav ul li a {
  text-decoration: none;
  color: #007bff;
  font-size: 1.2em;
}

.content {
  text-align: center;
  padding: 40px 10%;
  width: 80%;
  margin: auto;
}

.cluster {
  margin-bottom: 20px;
}

.cluster h2 {
  cursor: pointer;
  color: #007bff;
}

.cluster ul {
  list-style: none;
  padding: 0;
}

.cluster ul li {
  margin: 5px 0;
}
</style>
